Day19 六角 Flex時光屋#1

簡單小語

看到當時時光屋練習的作品，想說挑兩個來整併，當作練習的機會，這次的結構不一樣的是，header及footer使用相同結構的套用，在製作上來就互叫醒時間，僅需細節的對位及樣式修改，因為想不到什麼好的修改樣式就硬是做了一個哈哈，練習JQuery的收合式選單及側邊收合式選單，找回些微動畫的練習模式，發現目前都是很單純觸發事件，看來JavaScript還需努力學習，才能讓畫面增添豐富色彩。

筆記分享

1. header就是用先前練習的menu方式進行排列及收合，加深印象，找回手感。
2. font-awesome 的變化使用觸發後的transform:rotate()做水平翻轉。
3. 計算好側邊收合及右邊收合的尺寸，就可以無縫接軌的觸發移動。
4. 右邊內容欄會因為收合導致內容被切掉，因為使用overflow:hidden所導致，或許有更好的方法可以自適應內容。
5. 內容欄位僅練習圖片排版，並在RWD時全部直向排列，避免圖片壓縮。
6. footer則是完全套用header的樣式，調整背景色及logo的顯示，再將©限定小於768px後才顯示置中。
7. 動畫都是利用.active的方式套入toggleClass後觸發效果，是不是有更好的命名方式才能好維護呢。
8. 持續練習用文字取代圖片，因為一個網頁只有一個h1而又屬logo最重要。
9. footer將logo隱藏起來使用width:0，若使用display:none則會失去footer的高度。
10. font-awesome可以直接增加class=”fa-2x,3x…”改變大小。

刻意練習

Practice(200811 Day 19)

首次練習

Hex_Flex時光屋_3_雙欄選單設計
Hex_Flex時光屋_4_表頭表尾設計

2020 iT邦幫忙鐵人賽 Day19 網頁前端-刻意練習(Flex時光屋#1)